<template>
    <a-select :disabled="disabled" size="small" :dropdownMatchSelectWidth="false" @select="change"
              :dropdownMenuStyle="{height: '500px'}"
              dropdownClassName="cell-border-dropdown ignore-event-for-design-table"
              v-model="innerValue" style="width: 80px; margin-left: 5px">
      <a-select-option @mousedown.stop v-for="item in options" :value="item.value">
        <div style="display: flex; justify-content: center; align-items: center">
          <span class="iconfont border-icon" v-html="item.icon"></span>
          <span class="iconfont" v-html="item.visibleIcon"></span>
        </div>
      </a-select-option>
    </a-select>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'CellBorder',
  props: {
    selection: createProps(Object, undefined),
    disabled: createProps(Boolean),
  },
  data() {
    return {
      value: undefined,
      options: [
        {
          icon: '&#xe87e;',
          visibleIcon: '&#xe8d4;',
          value: 'Outter'
        },
        {
          icon: '&#xe883;',
          visibleIcon: '&#xe8d4;',
          value: 'Inner'
        },
        {
          icon: '&#xe6fc;',
          visibleIcon: '&#xe8d4;',
          value: 'All'
        },
        {
          icon: '&#xe701;',
          visibleIcon: '&#xe8d4;',
          value: 'Top'
        },

        {
          icon: '&#xe6fd;',
          visibleIcon: '&#xe8d4;',
          value: 'Bottom'
        },

        {
          icon: '&#xe702;',
          visibleIcon: '&#xe8d4;',
          value: 'Left'
        },
        {
          icon: '&#xe700;',
          visibleIcon: '&#xe8d4;',
          value: 'Right'
        },
        {
          icon: '&#xe87e;',
          visibleIcon: '&#xe8d5;',
          value: 'hideOutter'
        },
        {
          icon: '&#xe883;',
          visibleIcon: '&#xe8d5;',
          value: 'hideInner'
        },
        {
          icon: '&#xe701;',
          visibleIcon: '&#xe8d5;',
          value: 'hideTop'
        },
        {
          icon: '&#xe6fd;',
          visibleIcon: '&#xe8d5;',
          value: 'hideBottom'
        },
        {
          icon: '&#xe702;',
          visibleIcon: '&#xe8d5;',
          value: 'hideLeft'
        },
        {
          icon: '&#xe700;',
          visibleIcon: '&#xe8d5;',
          value: 'hideRight'
        },
        {
          icon: '&#xe6fe;',
          visibleIcon: '&#xe8d5;',
          value: 'None'
        }
      ]
    };
  },
  methods: {
    change() {
      if(!this.innerValue) return
      if (this.innerValue.indexOf('hide') === 0) {
        let method = this.innerValue;
        this.selection && this.selection[method] && this.selection[method]();
        return;
      }
      let method = `showBorder${this.innerValue}`;
      this.selection && this.selection[method] && this.selection[method]();
    },
  },
  computed: {
    innerValue: {
      get() {
        if (this.disabled) return this.value = undefined;
        return this.value;
      },
      set(v) {
        this.value = v;
      },
    }
  }
};
</script>
<style scoped>
.border-icon {
  font-size: 25px;
  margin-right: 10px;
}
</style>
<style>
.cell-border-dropdown .ant-select-dropdown-menu {
  height: 300px;
  max-height: 300px;
}

</style>